<template>
  <div class="public-bar">
    <van-nav-bar title="公开栏" left-arrow @click-left="$router.go(-1)" fixed></van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div>
          <!-- <div v-if="index != 0" class="devide_div"></div> -->
          <div class="lifepay_devide_info">
            <ul class="repair_ul">
              <li
                v-for="o in tmpList"
                :key="o.id"
                class="repair_list"
                @click="$router.push({ name: 'publicBarDetails' ,params: {id:o.id} })"
              >
                <span class="repair_title">{{ o.applyName }}</span>
                <p class="repair_time_des">
                  <span>{{o.content}}</span>
                </p>
                <van-divider dashed></van-divider>
                <div class="dz_">
                  <div class="repair_time">{{ o.creationDate }}</div>
                  <div class="dz_box">
                    <div v-if="o.isFavorited == 2" @click.stop="thumbs(o)" class="dz_svg">
                      <svg-icon icon-class="点赞-默认" widthW="1.2em" heightH="1.2em" />
                      <span style="padding-left: 2px;">{{o.favoriteCount}}</span>
                    </div>
                    <div v-if="o.isFavorited == 1" @click.stop="cancelLike(o)" class="dz_svg">
                      <svg-icon icon-class="点赞-选中" widthW="1.2em" heightH="1.2em" />
                      <span style="padding-left: 2px;">{{o.favoriteCount}}</span>
                    </div>
                    <div @click.stop="showInformPop(o.id)" class="inform_">
                      举报
                      <!-- <van-icon name="warn-o" /> -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
    <div class="bgc" v-if="showInform">
      <div class="inform-sheet" v-if="showInform">
        <div class="title-bar">
          <div class="close" @click="closeSheet">
            <!-- <van-icon name="close" /> -->
            关闭
          </div>
          <span class="title">请输入举报原因</span>
          <div class="complete" @click="integral_inform">
            <!-- <van-icon name="passed" /> -->
            提交
          </div>
        </div>
        <div class="content">
          <van-field
            v-model="message"
            required
            rows="5"
            autosize
            type="textarea"
            placeholder="请输入举报原因"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import integral from "../../controller/integral";
import constant from "@/controller/constant.js";
export default {
  name: "myRepair",
  data() {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      recordList: [],
      tmpList: [],
      curPage: 1,
      pageSize: 10,
      showLoading: false,
      showInform: false,
      message: "",
      neighborhoodId: "",
      applyId: ""
    };
  },
  mounted() {
    this.neighborhoodId = JSON.parse(localStorage.getItem("userInfo")).shequId;
  },
  methods: {
    // 举报
    integral_inform() {
      if (this.message === "") {
        this.$toast("请输入举报原因");
        return;
      }
      let data = {
        applyId: this.applyId,
        content: this.message
      };
      integral.integral_inform(data).then(res => {
        if (res.code === "0") {
          if (res.datas) {
            this.$toast("举报成功");
            this.showInform = false;
            this.message = "";
          }
        }
      });
    },
    thumbs(o) {
      let data = {
        applyId: o.id
      };
      integral.integral_like(data).then(res => {
        if (res.code === "0") {
          if (res.datas) {
            o.isFavorited = 1;
            o.favoriteCount += 1;
          }
        }
      });
    },
    // 取消点赞
    cancelLike(o) {
      let data = {
        applyId: o.id
      };
      integral.integral_like_cancel(data).then(res => {
        if (res.code === "0") {
          if (res.datas) {
            o.isFavorited = 2;
            o.favoriteCount -= 1;
          }
        }
      });
    },
    completeSheet() {
      this.showInform = false;
    },
    closeSheet() {
      this.message = "";
      this.showInform = false;
    },
    showInformPop(id) {
      this.showInform = true;
      this.applyId = id;
    },
    onRefresh() {
      this.tmpList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getRecordList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getRecordList();
    },
    getRecordList() {
      this.showLoading = false;
      let id = this.neighborhoodId;
      const data = {
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      integral
        .integral_public_list(id, data)
        .then(res => {
          this.showLoading = false;
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              // this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (
              (res.datas && res.datas.records.length !== 0) ||
              res.datas !== null
            ) {
              this.tmpList = [...this.tmpList, ...res.datas.records];
            }
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            this.finished = true;
            this.loading = false;
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./../../views/workstation/styles/workstation.scss";

.public-bar {
  background: #ffffff;
  height: 100%;

  .repair_ul {
    .repair_list {
      border-bottom: 5px solid rgba(226, 226, 226, 0.5);
      padding: 15px;
      color: #333333;
      position: relative;
      background: #ffffff;
      .repair_title {
        font-size: 16px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .status_title {
        margin-left: 10px;
        font-size: 14px;
        line-height: 20px;
        color: #ffffff;
      }

      p {
        margin: 8px 0 0 0;
        span {
          font-size: 12px;
          color: #999999;
        }
      }
      .dz_ {
        width: 100%;
        height: 20px;
        .repair_time {
          width: 40%;
          float: left;
          font-size: 14px;
        }
        .dz_box {
          width: 60%;
          float: right;
          text-align: right;
          .dz_svg {
            display: inline-block;
            padding-right: 30px;
            color: #999;
          }
          .inform_ {
            display: inline-block;
            font-size: 14px;
            color: #999;
            /* margin-top: 1px; */
            float: right;
          }
        }
      }
    }
  }
  .bgc {
    height: 100%;
    background-color: rgba(000, 000, 000, 0.5);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .inform-sheet {
      width: 100%;
      height: 200px;
      background: #fff;
      position: fixed;
      bottom: 0;
      .title-bar {
        width: 85%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: auto;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;
        color:#666;
        .title {
          color: #666;
          font-size: 16px;
        }
        .close {
          text-align: center;
          font-size: 16px;
        }
        .complete {
          text-align: center;
          font-size: 16px;
        }
      }
      .content {
        padding: 16px 16px 160px;
      }
    }
  }
}
</style>